<template>
	<div class="page">
		<global-header title="H5/APP下载" @back="$router.back()" />
		<main class="page-main">
			<div class="tabs">
				<custom-tabs v-model:value="state.activeTab" :options="[
					{ text: 'H5/APP扫码下载', value: 'h5Url' },
					{ text: '会员端APP', value: 'appUrl' }
				]" />
			</div>

			<div class="wrap">
				<div class="content">
					<h1>{{ tabs[state.activeTab] }}</h1>
					<div class="refresh-icon" @click.prevent="() => refresh">
						<van-icon name="replay" />
						<span>刷新</span>
					</div>
					<div class="link-wrap">
						<div class="link">
							<van-icon name="link-o" size="20" />
							<span>{{ state[state.activeTab] }}</span>
						</div>
						<van-button @click="handleCopy(state[state.activeTab])">复制</van-button>
					</div>
					<qrcode-vue :value="state[state.activeTab]" :size="250" level="H" />
					<p class="long-press">保存二维码可分享</p>
				</div>
			</div>
		</main>
	</div>
</template>
<route>
  {
    name: "admin-main-appdown",
    meta: {
      pageIndex: 4,
    }
  }
</route>
<script setup lang="ts">
import QrcodeVue from "qrcode.vue";
import { handleCopy } from "@/hooks/useUtils";
import { reqDomainList } from "@/api/login";


const tabs: any = {
	h5Url: "H5/APP扫码下载",
	appUrl: "会员端APP"
};
const onTabChange = (value: string) => {
	state.activeTab = value;
};
const state = reactive({
	activeTab: "h5Url",
	h5Url: location.href,
	appUrl: location.href
} as { [key: string]: string });

const refresh = () => {
	reqDomainList().then(res => {
		localStorage.setItem("domainList", JSON.stringify(res.data))
		state.h5Url = res.data.h5_domains[0].Domain;
		state.appUrl = res.data.other_domains[0].Domain;
	});
};


const getDomailList = () => {

	const domainStorageVal = localStorage.getItem("domainList")
	if (domainStorageVal) {
		var data = JSON.parse(domainStorageVal);
		state.h5Url = data.h5_domains[0].Domain;
		state.appUrl = data.other_domains[0].Domain;
	} else {
		refresh();
	}
}
onMounted(()=>{
	getDomailList()
})
</script>

<style scoped lang="scss">
.page {
	.tabs {
		padding: 12px 15px;
		background-color: #fff;

		&:deep(.van-tabs) {
			.van-tab--active {
				.van-tab__text {
					font-weight: 500;
					color: #ffffff;
				}
			}

			.van-tab__text {
				color: #888888;
			}

			.van-tabs__nav--card {
				border-color: #888888 !important;
			}
		}
	}

	.wrap {
		width: calc(100% - 30px);
		margin: 15px auto 0;

		.content {
			padding: 15px 12px;
			background-color: #fff;
			border-radius: 10px;
			display: flex;
			flex-direction: column;
			align-items: center;
			position: relative;
		}

		h1 {
			font-family: PingFang SC, PingFang SC;
			font-weight: bold;
			font-size: 17px;
			color: #111111;
			margin-bottom: 15px;
		}

		.refresh-icon {
			position: absolute;
			top: 10px;
			right: 10px;
			font-family: PingFang SC, PingFang SC;
			font-size: 15px;
			color: #3976cc;
			cursor: pointer;
		}

		.link-wrap {
			display: flex;
			gap: 10px;
			margin-bottom: 24px;

			.link {
				display: flex;
				width: 220px;
				height: 20px;
				line-height: 20px;
				background: #f1f4fb;
				border-radius: 5px;
				padding: 10px;
				gap: 10px;
			}

			:deep(.van-button) {
				width: 67px;
				height: 40px;
				border-color: #3976cc;
				color: #3976cc;
				background: #f1f4fb;
			}

			span {
				white-space: nowrap;
				overflow: hidden;
				text-overflow: ellipsis;
				font-family: PingFang SC, PingFang SC;
				font-weight: 500;
				font-size: 14px;
				color: #111111;
			}
		}

		.long-press {
			margin-top: 15px;
			font-family: PingFang SC, PingFang SC;
			font-weight: 500;
			font-size: 14px;
			color: #111111;
		}
	}
}
</style>
